<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>

	<!-- 导入3个文件 开始 -->
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 导入3个文件 结束 -->

	<style>
		@import url("https:unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

		.el-table .warning-row {
			background: oldlace;
		}

		.el-table .success-row {
			background: #f0f9eb;
		}
	</style>

</head>


<body>
	<div id="app">
		<template>
			<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column prop="date" label="#" width="180">
				</el-table-column>
				<el-table-column prop="name" label="角色名称" width="180">
				</el-table-column>
				<el-table-column prop="address" label="角色编码">
				</el-table-column>
			</el-table>
		</template>
	</div>
</body>
<script>
	var Main = {
		methods: {
			tableRowClassName({ row, rowIndex }) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			}
		},
		data() {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}]
			}
		}
	}
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#app')
</script>

</html>